<template>
  <div>
    <el-dialog
      :title="toChild"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="50%"
      lock-scroll
      :modal="false"
      class="showAll_dialog"
    >
      <div class="register_form_main">
        <el-row style="height: 100%">
          <el-col :span="24">
            <div class="grid-content-right">
              <el-form :model="userEditForm" ref="userEditRef" size="mini">
                <div class="userbox">
                  <ul class="lis">
                    <li>
                      <span>接口人名:</span
                      ><span :title="userEditForm.name">{{ userEditForm.name }}</span>
                    </li>
                    <li>
                      <span>性别:</span><span>{{ userEditForm.gender }}</span>
                    </li>
                    <li>
                      <span>客户:</span
                      ><span :title="userEditForm.customerName">{{ userEditForm.customerName }}</span>
                    </li>
                    <li>
                      <span>手机号:</span
                      ><span :title="userEditForm.cellPhone">{{ userEditForm.cellPhone }}</span>
                    </li>
                    <li>
                      <span>邮箱:</span><span :title="userEditForm.email">{{ userEditForm.email }}</span>
                    </li>
                    <li>
                      <span>接口人办公地址:</span>
                      <span :title="userEditForm.address">{{ userEditForm.address }}</span>
                    </li>
                    <li class="new">
                      <span>介绍:</span>
                      <span :title="userEditForm.introduce">{{
                        userEditForm.introduce
                      }}</span>
                    </li>
                  </ul>
                  <div>
                    <el-tabs v-model="activeName" >
                      <el-tab-pane label="项目表" name="first">
                        <el-table
                          :data="tableData1"
                          height="311"
                          style="width: 100%"
                          v-loading="loading"
                          element-loading-background="transparent"
                        >
                          <el-table-column
                            label="序号"
                            type="index"
                            :index="indexMethod"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="项目名称"
                          >
                          </el-table-column>
                          <el-table-column prop="status" label="项目状态">
                          </el-table-column>
                          <el-table-column prop="customerName" label="客户">
                          </el-table-column>
                          <el-table-column prop="employeeNum" label="项目人数">
                          </el-table-column>
                          <!-- <el-table-column prop="gap" label="项目缺口">
                          </el-table-column> -->
                        </el-table>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogClose" size="mini"
            >取 消</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryProject} from "@/api/project";
export default {
  props: {
    toChild: String,
  },
  data() {
    return {
      // 假数据
      tableData1: [],
      // 假数据
      activeName: "first",
      dialogFormVisible: false,
      userEditForm: {
        customerName: "",
        address: "",
        cellPhone: "",
        customerId: "",
        email: "",
        gender: "",
        interfaceId: "",
        name: "",
        introduce: "",
      },
      loading:true
    };
  },
  methods: {
    openDialog(row) {
      this.dialogFormVisible = true; // 让弹窗显示
      this.userEditForm=row
      queryProject({current:1,size:1000000,records:[{contactPeoples:[{id:row.id}]}]}).then(res=>{
        if (res && res.code && res.code === "00000") {
              this.tableData1 = res.data.records; // 项目表格数据赋值
            }
            this.loading=false
      })
    },

    // 确定
    dialogClose() {
      this.dialogFormVisible = false;
      this.tableData1=[]
      console.log(this.userEditForm, "确定231确定3131");
    },
    indexMethod(index) {
      return index + 1;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  list-style: none;
}
@deep: ~">>>";
@{deep} .register_form_main {
  position: relative;
  min-width: 40%;
  overflow: hidden;
  > span {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    padding: 20px 0;
    color: #409eff;
    background-color: #383f49;
    text-shadow: 0 1px -3px #409eff;
  }
}
::v-deep .cell {
  text-align: center;
}
::v-deep .el-dialog__body {
  margin: 0 40px;
  padding: 0 40px;
}
.lis {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  li {
    // width: 400px;
    width: 50%;
    margin: 10px 0;
    display: flex;
    span {
      display: block;
    }
    span:nth-child(1) {
      min-width: 110px;
    }
    span:nth-child(2) {
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1; /* 超出几行省略 */
    }
  }
  .new {
    width: 100%;
    span:nth-child(1) {
      display: block;
      min-width: 110px;
    }
    span:nth-child(2) {
      width: 660px;
      line-height: 20px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 超出几行省略 */
    }
  }
}
::v-deep .el-table {
  font-size: 12px;
}
.dialog-footer {
  text-align: center;
}
::v-deep .el-dialog {
  margin-top: 10vh !important;
}
.textarea {
  ::v-deep .el-textarea__inner {
    height: 100px;
    line-height: 30px;
  }
}
::v-deep .dialog-footer {
  padding: 20px 0;
}
::v-deep .el-textarea__inner {
  margin-bottom: 20px;
  margin-top: 5px;
  font-size: 14px;
  font-family: "微软雅黑";
}
::v-deep .el-form-item__label {
  min-width: 44px;
}
.introduce {
  display: block;
  display: flex;
  width: 200px;
}
::v-deep .el-dialog {
  min-width: 450px;
}
</style>